<template>
  <div style="width: 100%;height: 100%;" ref="div">

  </div>
</template>

<script setup lang="ts">
// 引入echarts
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { ref, onMounted, nextTick, watch } from 'vue'
// 引入仓库
import UseMockStore from '@/stores/mock';
const MockStore = UseMockStore()

// 获取div的DOM元素
let div = ref()

// 监听仓库数据的变化
watch(() => MockStore.MackObj, () => {
  nextTick(() => {
    // 获取echarts的初始化实例
    let Mychart = echarts.init(div.value)
    // 绘制图表
    Mychart.setOption({
      series: [{
        type: 'liquidFill',
        data: [0.6,0.5,{
            value: 0.3,
            itemStyle: {
                color: 'skyBlue',
                opacity: 0.6
            },
            emphasis: {
                itemStyle: {
                    opacity: 0.9
                }
            }
        }],
        itemStyle: {
          normal: {
            opacity: 0.7
          },
          emphasis: {
            opacity: 0.7
          }
        },
        outline: {
          borderDistance: 0,
          itemStyle: {
            borderWidth: 5,
            borderColor: '#156ACF',
            // shadowBlur: 20,
            // shadowColor: 'rgba(255, 0, 0, 1)'
          },
        },
        radius: "90%",
        shape: "pin",
        label: {
          normal: {
            fontSize: 15,
            color: 'lightgray'
          }
        }
      }]
    })
  })
})


</script>
<script lang="ts">
export default {
  name: 'Drip'
}
</script>
<style lang="scss" scoped></style>